// @6 无需单独安装 类型声明文件
import { Routes, Route, Navigate, NavLink } from "react-router-dom";
import Home from "./views/Home";
import About from "./views/About";

export default function App() {
  return (
    <div>
      <h1>App</h1>
      {/* 
        1. 使用 Routes 替换 Switch 组件，且 Routes 是必须的。
        2. 路由匹配算法更新，无需考虑排序了。有一篇文章可以看一下。
        3. 移除了 <Route /> 的 component 属性，改为使用 element
           3.1 路由组件不会自动收到路由相关的三个Prop了。
           3.2 withRouter 高阶组件，也被干掉了。
           3.3 使用 useNavigate 获取 navigate 来实现路由的编程式导航。useHistory 移除了。
           3.4 使用 useParams 获取 动态路径参数
           3.5 使用 useSearchParams 获取 search 参数（？号参数）
        4. Routes 下除了 Route or Fragment 不能有别的
        5. 新增了 Outlet 组件，用于渲染子路由
        6. Route 新增了 index 属性，叫做默认子路由
        7. 移除 Redirect 组件，新增 Navigate 组件。
            7.1 需要注意，添加 replace 来实现重定向的效果
        8. <Link /> 的 to 与 <Route /> 的 path 都支持相对路径。
            8.1 PS 还是更推荐写绝对路径
        9. NavLink 组件，移除了 activeClassName, 现在需要给 className 传递一个函数的方式来玩
        10. Link 与 NavLink 增加了 state 属性，用于 state 参数传递
            10.1 state参数目前存储在会话，刷新页面不会丢失。但是关闭浏览器再次访问该链接，数据还是会丢失。所以还是不推荐使用 state 传递参数。
      */}
      <ul>
        <li>
          <NavLink
            to="/home"
            className={({ isActive }) => (isActive ? "hello" : "")}
          >
            Home
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/about"
            className={({ isActive }) => (isActive ? "hello" : "")}
          >
            About
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/about/100/ls"
            state={{ a: 1, b: 2 }}
            className={({ isActive }) => (isActive ? "hello" : "")}
          >
            About
          </NavLink>
        </li>
      </ul>

      <hr />
      <Routes>
        <Route path="/home" element={<Home />}>
          {/* 当 URL 地址匹配 /home 时，渲染 index 默认子组件到 Outlet 出口中 */}
          <Route index element={<div>默认内容</div>} />
          <Route path="/home/a" element={<div>A组件</div>} />
          <Route path="/home/b" element={<div>B组件</div>} />
        </Route>
        <Route path="/about/:id/:name" element={<About />} />

        <Route path="/dashboard" element={<div>Dashboard</div>} />
        <Route path="/system" element={<div>System</div>} />

        <Route path="*" element={<Navigate to="/about" replace />} />
      </Routes>
    </div>
  );
}
